<!--
	作者：keepxjw@126.com
	时间：2017-04-25
	描述：1.拼接字符串
	    2.写DOM
-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		   #newBtn{
		   	width: 90px;
		   	height: 30px;
		   	border: none;
		   	outline: none;
		   	margin-bottom: 10px;
		   }
		   #newBtn:active{
		   	transform: translateY(2px);
		   }
		   .content{
		   	width: 1920px;
		   
		   	border: 1px solid #CCCCCC;
		   }
		   .content>div{
		   	float: left;
		   	margin-left: 10px;
		   }
		   /*清除浮动*/
		   .content{
		   	zoom: 1;
		   }
		   .content:after{
		   	  clear: both;
		   	  content: '';
		   	  display: block;
		   	  width: 0;
		   	  height: 0;
		   	  visibility: hidden;
		   }
		  
		  
			.containner{
				width: 500px;
				height:300px;
				border: 1px solid #CCCCCC;
				box-shadow: 2px 2px 2px #CCCCCC;
			}
			
			.left{
				float: left;
			}
			.left>img{
				width: 300px;
				height: 300px;
			}
			.right{
				float: left;
				margin-left: 10px;
			}
			p{
				font-family: "微软雅黑";
			}
		</style>
	</head>
	<body>
		<button id="newBtn" onclick="load()">点击创建</button>
	    <div class="content" id="content">
		</div><!--content end-->
		
	
		<script src="js/plugins/ligerUI/jquery-1.9.0.min.js" type="text/javascript"></script>
        <script type="text/javascript">
          
          /*$(function(){
          	createEles();
          })*/
        	var jsons=[
        	 {left:"img/16.jpg",name:"A",address:"AA",price:123,cheap:"游记返现"},
        	 {left:"img/16.jpg",name:"B",address:"BB",price:123,cheap:"分享返现"},
        	 {left:"img/16.jpg",name:"C",address:"CC",price:123,cheap:"游记返现"},
        	 {left:"img/16.jpg",name:"D",address:"DD",price:123,cheap:"点评返现"},
        	 {left:"img/16.jpg",name:"E",address:"EE",price:123,cheap:"游记返现"},
        	 {left:"img/16.jpg",name:"F",address:"FF",price:123,cheap:"点评返现"},
        	]
        	var html="";
        	
        	function createEles(){
        		for(var i=0;i<jsons.length;i++){
        			html+='<div class="containner"><div class="left"><img src="'+jsons[i].left+'" alt="" /></div><div class="right">'+
				'<p>'+jsons[i].name+'</p><p>上海市浦东新区120号</p><p>价格：&yen;1587</p></div></div>';
        		}
        		
				return html;
        	}
        	function load(){
        		$("#content").html(createEles());
        	}
        
        </script>        
	</body>
</html>
